import React from "react";

class FnClass extends React.Component {
  state = {
    inputValue: "11",
    checkedArr: ["c1"],
  };

  handleCheckClick = (e) => {
    let arr = [...this.state.checkedArr];
    if (e.target.checked) {
      // 勾选
      this.setState({
        checkedArr: [...arr, e.target.value],
      });
    } else {
      // 取消勾选
      this.setState({
        checkedArr: arr.filter((item) => item !== e.target.value),
      });
    }
  };

  render() {
    return (
      <div>
        <div>
          {this.state.inputValue}
          input:
          <input
            type="text"
            value={this.state.inputValue}
            onInput={(e) => {
              this.setState({
                inputValue: e.target.value,
              });
            }}
          />
        </div>

        <div>checkbox: {this.state.checkedArr}</div>
        <div>
          <input
            type="checkbox"
            value="c1"
            checked={this.state.checkedArr.includes("c1")}
            onChange={this.handleCheckClick}
          />
          <span>c1</span>
          <input
            type="checkbox"
            value="c2"
            checked={this.state.checkedArr.includes("c2")}
            onChange={this.handleCheckClick}
          />
          <span>c2</span>
          <input
            type="checkbox"
            value="c3"
            checked={this.state.checkedArr.includes("c3")}
            onChange={this.handleCheckClick}
          />
          <span>c3</span>
        </div>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <FnClass></FnClass>
    </div>
  );
}

export default App;
